<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页签</title>
    <script src="../js/ChuanKou.js"></script>

    </script>

    <script>
        window.onload = function () {


        $('mydiv1').onclick = function () {
            $('dibu1').style.display = 'block';
            $('dibu2').style.display = 'none';
            $('dibu3').style.display = 'none';
        };
        $('mydiv2').onclick = function () {
            $('dibu1').style.display = 'none';
            $('dibu2').style.display = 'block';
            $('dibu3').style.display = 'none';
        };
        $('mydiv3').onclick = function () {
            $('dibu1').style.display = 'none';
            $('dibu2').style.display = 'none';
            $('dibu3').style.display = 'block';
        };
        };
    </script>

</head>
<body>
<div style="height: 400px;width: 600px; border: 1px solid gray;margin-top: 100px;margin-left: 100px;position: relative;">
    <div style="height: 30px;width:600px;line-height: 30px;text-align: center">
        <div id="mydiv1" style="border-right: 1px solid gray;height: 30px;width: 120px;float: left;background-color: #cd92d3;cursor: pointer;">页签1</div>
        <div id="mydiv2" style="border-right: 1px solid gray;height: 30px;width: 120px;float: left;background-color: pink;cursor: pointer;">页签2</div>
        <div id="mydiv3" style="border-right: 1px solid gray;height: 30px;width: 120px;float: left;background-color: lightgreen;cursor: pointer;">页签3</div>
    </div>
    <div id="dibu1" style="height: 370px;width: 600px;background-color: #cd92d3;position: absolute;top: 30px;left: 0;display: block;"></div>
    <div id="dibu2" style="height: 370px;width: 600px;background-color: pink;position: absolute;top: 30px;left: 0;display: none;"></div>
    <div id="dibu3" style="height: 370px;width: 600px;background-color: lightgreen;position: absolute;top: 30px;left: 0;display: none;"></div>
</div>


</body>
</html>